<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v_model的基本使用</title>
</head>
<body>
  <div id="app">
    <!--1. 手动实现双向绑定-->
    <h2>手动实现双向绑定</h2>
    <span>v-bind:  </span><input type="text" v-bind:value="message" @input="inputChange"><br><!--v-bind绑定message, message又绑定了@input-->
    <h2>{{message}}</h2>
    <!--2. v-model实现双向绑定-->
    <h2>v-model实现双向绑定</h2>
    <span>v-model: </span><input type="text" v-model="message_v_model">
    <h2>{{message_v_model}}</h2>
    <span>登录功能</span>
    <label for="account">
      账户: <input id="account" type="text" v-model="account">
    </label>
    <label for="password">
      密码: <input id="password" type="password" v-model="password">
    </label>
    <button @click="loginClick()">登录</button>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      data: function(){
        return {
          message: "hello v_model",
          message_v_model: "v-mdel",
          account: "",
          password: ""
        }
      }
      ,methods: {
        inputChange: function(event) {
          this.message = event.target.value
        },
        loginClick: function() {
          const account = this.account
          const password = this.password
          // 发送网络请求:
          // fetch()
          console.log("发送网络请求: ", account, " ", password)
        }
      },
      computed: {
        
      },
      watch: {
        message: {
          handler(newValue, oldValue){
            console.log("新数据: ", newValue, "旧数据: ", oldValue)
          },
          deep: true
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
  </script>

</body>
</html>
